<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>滑块</title>
  <link rel="stylesheet" href="layui-v2.6.8/layui/css/layui.css">
</head>

<body>
  <div id="demo11"></div>



  <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>将一段已知数组分页展示</legend>
  </fieldset>

  <div id="demo20"></div>
  <ul id="biuuu_city_list"></ul>
  <div id="slideTest1"></div>
  <script src="./layui-v2.6.8/layui/layui.js"></script>
  <script>
layui.use(['laypage', 'layer'], function(){
  var laypage = layui.laypage
  ,layer = layui.layer;
  //将一段数组分页展示
  
  //测试数据
  var data = [
    '北京',
    '上海',
    '广州',
    '深圳',
    '杭州',
    '长沙',
    '合肥',
    '宁夏',
    '成都',
    '西安',
    '南昌',
    '上饶',
    '沈阳',
    '济南',
    '厦门',
    '福州',
    '九江',
    '宜春',
    '赣州',
    '宁波',
    '绍兴',
    '无锡',
    '苏州',
    '徐州',
    '东莞',
    '佛山',
    '中山',
    '成都',
    '武汉',
    '青岛',
    '天津',
    '重庆',
    '南京',
    '九江',
    '香港',
    '澳门',
    '台北'
  ];
  
  //调用分页
  laypage.render({
    elem: 'demo20'
    ,count: data.length
    ,jump: function(obj){
      //模拟渲染
      document.getElementById('biuuu_city_list').innerHTML = function(){
        var arr = []
        ,thisData = data.concat().splice(obj.curr*obj.limit - obj.limit, obj.limit);
        layui.each(thisData, function(index, item){
          arr.push('<li>'+ item +'</li>');
        });
        return arr.join('');
      }();
    }
  });
  
});
  </script>
</body>

</html>